<template>
  <span>教育背景</span>
  <el-button text @click="isAddEd = true">添加教育背景</el-button>
  <el-form v-if="isAddEd" :model="addEdForm" label-width="100px">
    <el-form-item label="学校名称" prop="school">
      <el-input v-model="addEdForm.school"></el-input>
    </el-form-item>
    <el-form-item label="所学专业" prop="major">
      <el-input v-model="addEdForm.major"></el-input>
    </el-form-item>
    <el-form-item label="学历" prop="degree">
      <el-select v-model="addEdForm.degree" placeholder="请选择学历">
        <el-option v-for="option in degreeOptions" :key="option.value" :label="option.label"
                   :value="option.value"/>
      </el-select>
    </el-form-item>
    <el-form-item label="入学时间" prop="startYear">
      <el-date-picker
          v-model="addEdForm.startYear"
          placeholder="请选择"
          type="date"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="毕业时间" prop="endYear">
      <el-date-picker
          v-model="addEdForm.endYear"
          placeholder="请选择"
          type="date"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="详情" prop="description">
      <el-input v-model="addEdForm.description" type="textarea"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addED(addEdForm)">添加</el-button>
      <el-button type="info" @click="isAddEd = false">取消</el-button>
    </el-form-item>
  </el-form>
  <el-empty v-show="edList.length == 0 && !isAddEd" description="还没有填写教育背景"/>
  <div v-for="ed in edList" :key="ed.id">
    <el-descriptions :column="2" :title="ed.school" border class="des">
      <template #extra>
        <el-button v-show="!modifyDict[ed.id]" type="primary" @click="modifyDict[ed.id] = true">编辑</el-button>
        <el-popconfirm
            v-show="!modifyDict[ed.id]"
            cancel-button-text="取消"
            confirm-button-text="确定"
            title="确定删除吗?"
            @confirm="deleteED(ed)"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button v-show="modifyDict[ed.id]" type="info" @click="modifyDict[ed.id] = false">取消</el-button>
        <el-button v-show="modifyDict[ed.id]" type="success" @click="updateED(ed)">保存</el-button>
      </template>
      <el-descriptions-item label="学校">
        <el-input v-show="modifyDict[ed.id]" v-model="ed.school"/>
        <span v-show="!modifyDict[ed.id]">{{ ed.school }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="专业">
        <el-input v-show="modifyDict[ed.id]" v-model="ed.major"/>
        <span v-show="!modifyDict[ed.id]">{{ ed.major }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="入学时间">
        <div v-show="modifyDict[ed.id]">
          <el-date-picker
              v-model="ed.startYear"
              placeholder="Pick a day"
              type="date"
          />
        </div>
        <span v-show="!modifyDict[ed.id]">{{ ed.startYear.substr(0, 10) }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="毕业时间">
        <div v-show="modifyDict[ed.id]">
          <el-date-picker
              v-model="ed.endYear"
              placeholder="请选择"
              type="date"
          />
        </div>
        <span v-show="!modifyDict[ed.id]">{{ ed.endYear.substr(0, 10) }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="学历">
        <el-select v-show="modifyDict[ed.id]" v-model="ed.degree" placeholder="请选择学历">
          <el-option v-for="option in degreeOptions" :key="option.value" :label="option.label"
                     :value="option.value"/>
        </el-select>
        <span v-show="!modifyDict[ed.id]">{{ ed.degree }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="详情">
        <el-input v-show="modifyDict[ed.id]" v-model="ed.description" type="textarea"/>
        <div v-show="!modifyDict[ed.id]">{{ ed.description }}</div>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider/>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import type {EducationalBackgroundInterface, ResponseInterface, StudentInterface} from "@/model/type";
import {
  addEducationBackgroundAPI,
  deleteEducationBackgroundAPI,
  getEducationBackgroundAPI,
  updateEducationBackgroundAPI
} from "@/api/ResumeAPI";
import {ElMessage} from "element-plus";

const resumeId = ref<string>(localStorage.getItem("resumeId"))
const student = ref<StudentInterface>(JSON.parse(localStorage.getItem("user") || "{}"))
const edList = reactive<Array<EducationalBackgroundInterface>>([])
const modifyDict = reactive({id: false})
const isAddEd = ref<boolean>(false)
const addEdForm = ref<EducationalBackgroundInterface>({
  degree: "",
  description: "",
  endYear: "",
  id: "",
  major: "",
  resumeId: "",
  school: "",
  startYear: "",
  studentId: ""
})
const degreeOptions = [
  {value: '专科', label: '专科'},
  {value: '本科', label: '本科'},
  {value: '硕士', label: '硕士'},
  {value: '博士', label: '博士'},
]

async function addED(ed: EducationalBackgroundInterface) {
  ed.studentId = student.value.id
  ed.resumeId = resumeId.value
  const r: ResponseInterface = await addEducationBackgroundAPI(ed, localStorage.getItem("token") || "")
  if (r.code == 200) {
    ed = r.data
    edList.push(ed)
    Object.assign(modifyDict, {[ed.id.toString()]: false});
    isAddEd.value = false
    addEdForm.value = {
      degree: "",
      description: "",
      endYear: "",
      id: "",
      major: "",
      resumeId: "",
      school: "",
      startYear: "",
      studentId: ""
    }
  }
}

async function updateED(ed: EducationalBackgroundInterface) {
  const r: ResponseInterface = await updateEducationBackgroundAPI(ed, localStorage.getItem("token") || "")
  if (r.code == 200) {
    ElMessage.success("修改成功")
    modifyDict[ed.id] = false
  }
}

async function deleteED(ed: EducationalBackgroundInterface) {
  const r: ResponseInterface = await deleteEducationBackgroundAPI(ed, localStorage.getItem("token") || "")
  if (r.code == 200) {
    ElMessage.success("删除成功")
    edList.splice(edList.indexOf(ed), 1)
  }
}

onMounted(async () => {
  const r: ResponseInterface = await getEducationBackgroundAPI(resumeId.value, localStorage.getItem("token") || "")
  if (r.code == 200) {
    for (let i = 0; i < r.data.length; i++) {
      edList.push(r.data[i])
      Object.assign(modifyDict, {[r.data[i].id.toString()]: false});
    }
  }
})
</script>

<style scoped>
.des {
  margin-top: 20px;
}
</style>